<template>
  <div>
    <van-row>
      <van-col span="24" class="back" ><heads/></van-col>

      <van-row>
        <van-col>
          <van-col span="6" class="back"><left/></van-col>
        </van-col>

        <van-col>
          <h1>查看我的公告</h1>
          <van-button @click="tianjia" style="width: 100px;background-color: aqua;border: 1px">+  新增</van-button>
          <el-table :data="messagelist" style="width: 100%">
            <el-table-column prop="id" label="序号" width="180" />
            <el-table-column prop="title" label="标题" width="180" />
            <el-table-column prop="type" label="消息类型" />
            <el-table-column prop="username" label="发布人" />
            <el-table-column prop="priority" label="优先级" />
            <el-table-column prop="designate" label="通告对象" />
            <el-table-column prop="status" label="状态" />
            <el-table-column prop="userlist" label="执行人" />
            <el-table-column prop="stime" label="发布时间" />
            <el-table-column label="操作" />
          </el-table>

          <el-dialog v-model="outerVisible" title="新增" width="60%">
            <h1>发布通知</h1>

            <van-row>
              <van-col>
                <div>
                  <el-form>
                    <el-form-item label="标题" style="padding-left: 30px">
                      <el-input placeholder="请输入标题" v-model="form.title" style="width: 400px;"/>
                    </el-form-item>

                    <el-form-item label="开始时间">
                      <el-date-picker v-model="form.stime" type="date" placeholder="请选择开始时间"  style="width: 400px;"  value-format="YYYY-MM-DD">
                      </el-date-picker>

                    </el-form-item>


                    <el-form-item label="优先级" style="padding-left: 15px">
                      <el-select v-model="form.priority" placeholder="请选择优先级"  style="width: 400px;">
                        <el-option label="低" value="1"></el-option>
                        <el-option label="中" value="2"></el-option>
                        <el-option label="高" value="3"></el-option>
                      </el-select>
                    </el-form-item>


                    <el-form-item label="指定用户" v-if="form.designate==1">
                      <el-input placeholder="请选择用户" v-model="form.userlist" style="width: 400px;" @click="userlists"/>
                    </el-form-item>
                    <el-form-item v-else>

                    </el-form-item>




                  </el-form>






                </div>
              </van-col>

              <van-col>
                <div style="padding-left: 100px">
                  <el-form>
                    <el-form-item label="消息类型">
                      <el-select v-model="form.type" placeholder="请选择消息类型" style="width: 400px">
                        <el-option label="通知公告" value="1"></el-option>
                        <el-option label="系统消息" value="2"></el-option>
                      </el-select>
                    </el-form-item>

                    <el-form-item label="结束时间">
                      <el-date-picker v-model="form.etime" type="date" placeholder="请选择结束时间" style="width: 400px" value-format="YYYY-MM-DD">
                      </el-date-picker>

                    </el-form-item>


                    <el-form-item label="通告类型">
                      <el-select v-model="form.designate" placeholder="请选择通告类型" style="width: 400px">
                        <el-option label="指定用户" value="1"></el-option>
                        <el-option label="全体用户" value="2"></el-option>
                      </el-select>
                    </el-form-item>
                  </el-form>

                </div>


              </van-col>

            </van-row>
            <div>
              <el-form>
                <el-form-item label="内容" style="padding-left: 25px">
                  <el-input
                      v-model="form.content"
                      :rows="10"
                      type="textarea"
                      placeholder="Please input"
                  />
                </el-form-item>
              </el-form>
              <el-button type="text" @click="exit" style="margin-left: 1000px" class="exit">关闭</el-button>
              <el-button type="text" @click="add" style="margin-left: 1050px;" >确定</el-button>
            </div>

            <!--            {{form}}-->

          </el-dialog>


          <el-dialog v-model="userslist" title="请选择指定用户" width="60%">




            <el-table
                ref="multipleTable"
                :data="user"
                style="width: 100%"
                @selection-change="handleSelectionChange"
            >
              <el-table-column type="selection" width="55" />
              <el-table-column
                  property="id"
                  label="编号"
                  width="150"
              ></el-table-column>
              <el-table-column
                  property="username"
                  label="用户名"
                  width="200"
              ></el-table-column>
              <el-table-column
                  property="password"
                  label="密码"
                  width="200"
              ></el-table-column>
              <el-table-column
                  property="create_time"
                  label="创建时间"
                  width="200"
              ></el-table-column>
              <el-table-column
                  property="name"
                  label="部门"
                  width="200"
              ></el-table-column>
              <el-table-column
                  property="status"
                  label="状态"
                  width="200"
              ></el-table-column>

            </el-table>

            <el-button type="text" @click="exit1" style="margin-left: 1000px" class="exit">关闭</el-button>
            <el-button type="text" @click="exit1" style="margin-left: 1050px;" >确定</el-button>

          </el-dialog>

          <!--        {{form.username}}-->
<!--          {{form}}-->


        </van-col>
      </van-row>

    </van-row>
  </div>
</template>

<script>
import heads from '../components/heads'
import left from '../components/left'
import axios from "axios";

export default {
  name: "asdasd",
  data() {
    return {
      outerVisible:false,
      form:{'priority':'','title':'','stime':'','type':'','etime':'','designate':'','content':'','userlist':[]},
      //选中的指定用户

      //获取用户信息列表
      user:[],
      //弹出层 弹出所有用户
      userslist:false,
      messagelist:[]
    }
  },


  methods: {




    // 将选中用户存在列表中
    handleSelectionChange(val) {
      let arr = []
      for (let i=0;i<val.length;i++){
        if(arr.indexOf(val[i].username,-1)){
          arr.push(val[i].username)
        }
      }
      this.form.userlist = arr


      // console.log(val)
      //
      // console.log(this.username)

    },
    //关闭选中用户的弹窗
    exit1(){
      this.userslist = false
    },
    // 获取用户
    userlists(){
      axios.get('msg/userlist/')
          .then(res=>{
            //弹出层
            this.userslist = true
            this.user = res.data.list
            console.log(res.data.list)
          })
    },

    //  添加按钮
    add(){
      if(this.form.designate==2){
        this.form.userlist = []
      }
      axios.post('msg/post_Message/',this.form)
          .then(res=>{
            if(res.data.code==200){
              this.get_message()
              this.$toast.success(res.data.msg)
            }else{
              this.$toast.success(res.data.msg)
            }
            console.log(res)
          })
    },
    get_message(){
      axios.get('msg/post_Message/',this.form)
          .then(res=>{
            this.messagelist = res.data.list

          })
    },





    //新增按钮
    tianjia(){
      this.outerVisible = true
    },
    //关闭弹出框
    exit(){
      this.outerVisible = false
    },



  },

  mounted() {
    this.get_message()
  },

  components: {
    'heads':heads,
    'left':left
  }
}
</script>

<style scoped>
.exit{
  position: relative;
  top: 40px;
}
</style>